<template>
    <!-- 下拉框懒加载的组件封装 -->
    <div style="width:100%;">
        <!-- 懒加载 -->
        <el-select
            v-if="isLazy"
            ref="myLoadSelect"
            :class="!!LoadSelect_disabled?'disabled_select':''"
            collapse-tags
            filterable
            @visible-change="selectBlur"
            @change="selectChang"
            @focus="selectFocus"
            :filter-method="filterMethoda"
            v-model="value"
            :placeholder="$t('common.select_plactholder')"
            >
            <el-option
                v-for="item in select_options"
                :key="item[select_key]"
                :label="item[select_label]"
                :value="item[select_value]"
                :disabled="!!LoadSelect_disabled&&item.selected"
            >
            </el-option>
        </el-select>
    </div>
</template>

<script>
import { debounce } from '@/utils/func.js'
export default {
  components: {
  },
    name: "MyTable",
    props:{
        select_model:[Number, String],
        isDoubleJudge:{//是否二次判断
            type: Boolean,
            default:false
        },
        LoadSelect_disabled:{//是否禁用
            type: Boolean,
            default:false
        },
        modalName:[String],//字段名称
        select_options:[Array],//下拉单数据
        select_key:{//下拉单key
            type:String,
            default:'id'
        },
        select_label:{//下拉单label
            type:String,
            default:'name'
        },
        select_value:{//下拉单value
            type:String,
            default:'id'
        },
        isLazy:{//是否开启懒加载
            type: Boolean,
            default:false
        },
    },
    data() {
        return{
            options:[],
            value:'',
            hide_arr:[],
        }
    },
    watch: {
        select_model:{
            handler (newValue, oldValue,e) {
                // 当prop变化时，这里会执行你想要的操作
                this.value=this.select_model
            },
            deep: true // 开启深度监听
        },
    },
    mounted(){
        console.log(this.select_options)
    },
    methods: {

        selectBlur(type){
            if(!type){
                this.$emit('selectBlur')
            }
        },
        selectChang(){
            this.$emit('selectChang',{name:this.modalName,value:this.value})
        },
        selectFocus(){
            const SELECTWRAP = this.$refs.myLoadSelect.$el.querySelector('.el-scrollbar__wrap')
            if(!!SELECTWRAP){
                let that=this
                SELECTWRAP.addEventListener('scroll',function(e){
                    if(e.target.scrollHeight-e.target.scrollTop<=e.target.clientHeight){
                        if(that.isLazy){
                            that.$emit('loadData')
                        }
                    }
                })
            }
        },
        filterMethoda:debounce(function(value) {
            this.$emit('filterDataFun',value)
        },500),
    }
};
</script>

<style scoped lang="less">
/deep/.el-select-dropdown__item{
    padding: 0;
}
.el-select-dropdown__item.is-disabled{
    cursor: pointer;
}
</style>